<!--报修派工-->
<template>
    <div class="order-taking">
        <div class="img">
            <van-icon
                :name="img"
                size="60" />
        </div>
        <div class="info">
            <div class="title">{{$st('wp_Repair_Form_Assignment')}}</div>
            <div class="order-info">
                <div>{{$st('wp_Order')}}：{{ repairId }}</div>
                <div>{{$st('wp_Company_Name')}}：{{ company }}</div>
            </div>
        </div>
        <van-cell
            class="action"
            @click="selectCustomershow = true"
            is-link
            :value="selectedCustomer.label">
            <template #title>
                <span class="red">*</span>
                <span class="customer">{{$st('wp_Select_Client')}}</span>
            </template>
        </van-cell>
        <van-cell
            class="action"
            @click="selectUsershow = true"
            is-link
            :value="selectedUser.label">
            <template #title>
                <span class="red">*</span>
                <span class="customer">{{$st('wp_Send_work_to')}}</span>
            </template>
        </van-cell>
        <div class="button-group">
            <van-button
                v-if="!isConfirm"
                :disabled="buttonDisabled"
                class="confirm"
                round
                type="primary"
                @click="confirm">{{$st('wp_Confirm_dispatch')}}</van-button>
            <van-button
                v-if="isConfirm"
                class="confirm"
                round
                type="primary"
                @click="goto('maitenanceorderdetail',{ repairId: repairId})">{{$st('wp_check_order')}}</van-button>
            <van-button
                v-if="isConfirm"
                class="confirm"
                round
                @click="goto('maintenancelist')">{{$st('wp_Return_to_the_list_of_repair_work_orders')}}</van-button>
        </div>
        <popup-search-index-bar
            v-model="selectCustomershow"
            :data="customers"
            displayField = "label"
            @selectedItem="companySelected"
        />
        <popup-search-index-bar
            v-model="selectUsershow"
            :data="users"
            displayField = "label"
            @selectedItem="userSelected"
        />
    </div>
</template>

<script>
import { ref, reactive, computed } from 'vue';
import { useRouter } from 'vue-router';
import PopupSearchIndexBar from '@/components/_common/PopupSearchIndexBar.vue';
import dispatchImg from '@/assets/icon_60_dispatch@2x.png';
import dispatchSucceedImg from '@/assets/icon_60_success@2x.png';

import useMaintenanceInfoSetup from '@/setup/maintenanceteam/MaintenanceCustomInfoSetup';
import useMaintenanceMembersSetup from '@/setup/maintenanceteam/MaintenanceTeamMembersSetup';
import { getRepairDataSetup } from '@/setup/repair/RepairOptionsSetup';
import Cookies from 'js-cookie';

export default {
    name: 'OrderTaking',
    components: {
        PopupSearchIndexBar
    },
    props: {
        repairId: String,
        company: String
    },
    setup (props) {
        const { queryCustomerRecorf } = useMaintenanceInfoSetup();
        const { getAllMaintenanceTeamMembers } = useMaintenanceMembersSetup();
        const { repairDispatchtouser } = getRepairDataSetup();

        const img = ref(dispatchImg);
        const isConfirm = ref(false);
        const selectCustomershow = ref(false);
        const selectUsershow = ref(false);
        const selectedCustomer = ref('');
        const selectedUser = ref('');
        const users = reactive([]);
        getAllMaintenanceTeamMembers().then(response => {
            response.value.map((item) => {
                users.push({ value: item.account, label: item.alias ? `${item.account}(${item.alias})` : item.account });
            });
        });
        const customers = reactive([]);
        queryCustomerRecorf().then(response => {
            response.value.map((item) => {
                customers.push({ value: item.customer_id, label: item.customer_name });
            });
        });

        const confirm = () => {
            const params = {
                customer_id: selectedCustomer.value.value,
                receiver: selectedUser.value.value,
                repairid: props.repairId,
                username: Cookies.get('username')
            };
            repairDispatchtouser(params, () => {
                buttonDisabled.value = false;
                isConfirm.value = true;
                img.value = dispatchSucceedImg;
            });
        };
        const companySelected = (item) => {
            selectedCustomer.value = item;
        };
        const userSelected = (item) => {
            selectedUser.value = item;
        };
        const buttonDisabled = computed(() => !(selectedCustomer.value && selectedUser.value));
        const router = useRouter();
        const goto = (page, params) => {
            router.push({
                replace: true,
                name: page,
                params
            });
        };
        return {
            buttonDisabled,
            isConfirm,
            selectCustomershow,
            selectedCustomer,
            selectUsershow,
            selectedUser,
            customers,
            users,
            img,
            companySelected,
            userSelected,
            show: ref(false),
            confirm,
            goto
        };
    }
};
</script>

<style lang="scss" scoped>
.order-taking{
    .img{
        margin: 45px auto 15px auto;
        width: 60px;
        height: 60px;
        border-radius: 30px;
    }
    .info{
        text-align: center;
        margin-bottom: 23px;;
        .title{
            font-size: 15px;
            margin-bottom: 10px;
        }
        .order-info{
            font-size: 13px;
            color: rgba(0,0,0,0.60);
            div{
                margin-bottom: 5px;
            }
        }
    }
    .action{
        height: 44px;
    }
    .red{
        color: red;
    }
    .customer{
        font-size: 17px;
        font-weight: 400;
    }
    .button-group{
        text-align: center;
        margin-top: 60px;
    }
    .confirm{
        width: 180px;
        height: 35px;
        margin: 0 auto 15px auto;
        display: block;
        font-size: 17px;
    }
}
</style>
